import $ from 'jquery';
import styles from './index.module.less';
import videoUrl from '@/assets/movie.mp4';
import audioUrl from '@/assets/music.mp3';

function init() {
    const container = $('<div>')
        .addClass(styles.container)
        .appendTo('#app');
    const video = $('<video>')
        .prop('src', videoUrl)
        .prop('autoplay', true)
        .prop('muted', true)
        .prop('loop', true)
        .addClass(styles.video)
        .appendTo(container);
    const audio = $('<audio>')
        .prop('src', audioUrl)
        .prop('loop', true)
        .appendTo(container);
    
    $('<h1>').text('豆瓣电影').addClass(styles.title).appendTo(container);
    
    // 监听滚动条滚动事件
    $(window).on('scroll', function() {
        const scrollTop = document.documentElement.scrollTop;
        const clientHeight = document.documentElement.clientHeight;
        // 滚动高度小于视口高度开始播放，反之停止播放
        if (scrollTop >= clientHeight) {
            video[0].pause();
            audio[0].pause();
        } else {
            video[0].play();
            audio[0].play();
        }
    })
}

init();